// forms

/* range slider styling with vendor prefixes
*
* selector with vendor prefixes cannot be comma-sepparated.
* Results into repeating a lot.
* Those mixins target at reducing repetition.
*/
@mixin range-track($background, $border, $boxShadow, $height) {
	&::-moz-range-track {
		background: $background;
		border: $border;
		box-shadow: 0 2px 4px var(--box-shadow-color);
		height: $height;
	}

	&::-webkit-slider-runnable-track {
		background: $background;
		border: $border;
		box-shadow: 0 2px 4px var(--box-shadow-color);
		height: $height;
	}

	&::-ms-track {
		background: $background;
		border: $border;
		box-shadow: 0 2px 4px var(--box-shadow-color);
		cursor: pointer;
		height: $height;
	}
}

@mixin range-thumb($background, $border, $borderRadius, $boxShadow, $cursor, $dimension, $dimensionLarge, $topMargin) {
	&::-moz-range-thumb {
		background: $background;
		border: $border;
		border-radius: $borderRadius;
		box-shadow: 0 2px 4px var(--box-shadow-color);
		cursor: $cursor;
		height: $dimension;
		width: $dimension;
	}

	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		background: $background;
		border: $border;
		border-radius: $borderRadius;
		box-shadow: 0 2px 4px var(--box-shadow-color);
		cursor: $cursor;
		height: $dimensionLarge;
		margin-top: $topMargin;
		width: $dimensionLarge;
	}

	&::-ms-thumb {
		background: $background;
		border: $border;
		border-radius: $borderRadius;
		box-shadow: 0 2px 4px var(--box-shadow-color);
		cursor: $cursor;
		height: $dimension;
		width: $dimension;
	}
}

body.caerp {
	form.btn-container {
		display: inline;
	}

	form {
		font-size: .875rem;

		>div {
			padding-bottom: var(--padding-m);
		}

		legend,
		h2,
		h3,
		h4 {
			font-weight: bold;
			padding: var(--padding-s) 0;
			width: 100%;
		}

		legend {
			font-size: 1.25rem;
			margin-bottom: var(--padding-s);
		}

		.collapse_title,
		.title {
			color: var(--title-color);

			+div {
				padding-top: var(--padding-l);
			}

			~div {
				padding: var(--padding-s) 0;
			}
		}

		.collapse_title {
			~div {
				padding-left: var(--padding-4xl);
				padding-right: var(--padding-s);
			}
		}

		small {
			font-size: .875rem;
			font-weight: normal;
		}

		&.layout .form-row {
			display: flex;
			flex-wrap: wrap;
		}
	}

	fieldset>div,
	fieldset .flex>div {
		position: relative;

		&:not(:last-child):not(:empty):not(.col-content):not(.collapsible) {
			padding-bottom: var(--padding-xl);
		}
	}

	fieldset .flex.end_button {
		.col-content {
			padding-bottom: 0;
		}

		.col-button {
			padding: 1.5rem 0 0;
		}
	}

	fieldset .flex>div {
		padding-right: var(--padding-m);
		padding-bottom: var(--padding-xl);
	}

	fieldset>.flex {
		padding-bottom: 0;
	}

	fieldset .flex {
		flex-wrap: wrap;

		button {
			align-self: flex-start;
		}
	}

	fieldset .flex.editable {
		padding-right: var(--padding-m);

		>div.content {
			max-width: calc(100% - 40px);

			label {
				display: flex;
				padding: var(--padding-s) 0;
			}

			em {
				display: inline-block;
				padding-top: var(--padding-s);
			}
		}

		>button {
			margin: 0;
		}
	}

	fieldset.border {
		border-color: var(--theme-color);
	}

	.separate_block {
		.title {
			background: var(--title-background-color);
			border-bottom: 1px solid var(--border-trans-color);
			color: var(--text-color);
			font-weight: bold;
			padding: var(--padding-s) var(--padding-m);
			width: 100%;

			a {
				background: none;
			}

			+.content {
				padding: var(--padding-s);
			}

			&.with_action {
				align-items: center;
				border-top: 1px solid var(--border-trans-color);
				display: flex;
				justify-content: space-between;
				margin-top: var(--padding-xl);
			}
		}

		.content_vertical_padding:first-child .title.with_action {
			margin-top: var(--padding-m);
		}

		em.empty {
			padding: 0 var(--padding-s);
		}

		&.border_left_block {
			.title {
				padding-left: var(--padding-m);
				padding-right: var(--padding-m);

				~div {
					padding: var(--padding-m);
				}
			}

			h2.collapse_title {
				padding-left: var(--padding-m);
				padding-right: var(--padding-m);

				~div {
					padding: 0 var(--padding-m) var(--padding-s) var(--padding-4xl);
				}
			}
		}
	}

	.collapsible .separate_block .collapse_title>a {

		&:hover,
		&:focus,
		&:active {
			color: var(--form-title-text-hover-color);
		}
	}

	.border_left_block {

		h2.collapse_title span.status.error,
		h2.title span.status.error {
			background: var(--func-negative-color);
			display: none;

			svg {
				fill: var(--svg-invert-fill-color);
			}
		}

		h2.collapse_title span.status.success,
		h2.title span.status.success {
			background: var(--func-positive-color);
			display: none;
		}

		&.error {
			border-left-color: var(--func-negative-color) !important;

			h2.collapse_title svg.arrow {
				fill: var(--func-negative-color);
			}

			h2.collapse_title span.status.error,
			h2.title span.status.error {
				display: inline-block;
			}
		}

		&.success {
			border-left-color: var(--func-positive-color) !important;

			.collapse_title svg.arrow {
				fill: var(--func-positive-color);
			}

			h2.collapse_title span.status.success,
			h2.title span.status.success {
				display: inline-block;
			}
		}
	}

	label,
	span.label {
		display: inline-block;

		svg {
			height: 1rem;
			vertical-align: text-top;
			width: 1rem;

			&.error {
				display: none;
			}
		}

		&.required {
			.icon svg {
				fill: var(--func-negative-color);
				height: .75rem;
				vertical-align: text-top;
				width: .75rem;
			}

			.icon.required {
				font-size: .75rem;
				font-weight: normal;

				span {
					background: var(--form-required-background-color);
					display: none;
					margin-left: .5em;
					position: absolute;
					white-space: nowrap;
					z-index: $contentLayer;
				}
			}

			&:hover,
			&:focus {
				.icon.required span {
					display: inline;
				}
			}
		}

		span.req {
			background: var(--func-negative-color);
			border-radius: 50%;
			color: var(--static-invert-color);
			display: inline-block;
			font-size: 1rem;
			font-weight: normal;
			height: .825rem;
			line-height: 1.25rem;
			margin-left: .375rem;
			text-align: center;
			vertical-align: 0;
			width: .825rem;
		}
	}

	label[for],
	span.label {
		font-weight: bold;
		padding: 2px 0;
	}

	label:not([for]) {
		align-items: flex-start;
		display: flex;
		line-height: 1;
		padding: var(--padding-s) 0;

		input[type="checkbox"],
		input[type="radio"] {
			flex: 0 0 auto;
		}
	}

	.timeslot_attendee {
		div.radio {
			padding-top: 0;
			width: auto;
		}

		label:first-child {
			padding: var(--padding-s) 0;
			width: 15em;
		}

		&:nth-child(2n) {
			background: var(--table-odd-line-color);
		}

		.radio-inline {
			margin: .0625rem 0;
			padding-bottom: .125rem;
			padding-right: var(--padding-2xl);
		}
	}

	input[type="text"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	input[type="search"],
	select,
	textarea {
		background: var(--form-input-background-color);
		border: 1px solid var(--form-input-background-color);
		border-bottom-color: var(--form-input-line-color);
		border-radius: 0;
		box-shadow: none;
		color: var(--text-color);
		font-size: .875rem;
		padding: var(--padding-m) 1px;

		&:disabled {
			border-bottom-color: var(--form-focus-line2-color);
			color: var(--form-input-disabled-text-color);
			cursor: default;
		}

		&:invalid {
			border-bottom-color: var(--func-negative-color);
			outline: 0 none;
		}

		&:not(:disabled):not([readonly]):focus {
			box-shadow: 0 1px 0 var(--form-focus-line1-color), 0 2px 0 var(--form-focus-line2-color), 0 3px 0 var(--form-focus-line3-color);
			outline: 1px dotted var(--form-focus-outline-color);
			outline-offset: 1px;
		}

		&[readonly] {
			border-bottom-color: transparent;
			cursor: default;

			&:focus {
				outline: 0 none;
			}
		}

		&:-webkit-autofill {
			color: var(--static-color) !important;
		}

		&:autofill {
			color: var(--text-color) !important;
		}
	}

	input[type="file"] {
		font-size: .875rem;
		padding: var(--padding-m) 0;
	}

	input[type="color"] {
		border: 1px solid var(--border-color);
		border-radius: 0;
		height: 1rem;
		width: 1rem;
	}

	input[type="text"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	input[type="search"],
	select {
		height: 2.5rem;
		line-height: 1.25rem;
	}

	select option {
		background: var(--form-input-background-color);
		color: var(--text-color);
		padding: 0;
	}

	select[multiple] option {
		padding: 2px 0;
	}

	select[multiple] {
		height: auto;

		option[selected] {
			background: var(--theme-color);
			color: var(--theme-text-color);
		}
	}

	input[type="number"],
	input[type="date"],
	input.hasDatepicker[type="text"] {
		width: 9em;
	}

	input.coef[type="text"] {
		width: 5em;
	}

	input.price[type="text"] {
		width: 7em;
	}

	input[type="date"]::-webkit-inner-spin-button,
	input[type="date"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type="radio"],
	input[type="checkbox"] {
		height: 1.5rem;
		margin-right: .25rem;
		vertical-align: middle;
		width: 1.5rem;
	}

	textarea {
		line-height: 1rem;
	}

	a.btn,
	button {
		background: var(--form-button-background-color);
		border: 1px solid  var(--form-main-button-background-color);
		border-radius: 0;
		color: var(--form-button-text-color);
		cursor: pointer;
		font-size: .875rem;
		font-weight: bold;
		padding: .5rem 1.25rem;

		svg {
			font-size: 1rem;
			fill: var(--form-button-text-color);
			height: 1rem;
			pointer-events: none;
			vertical-align: sub;
			width: 1rem;

			title {
				display: none;
			}

			&:last-child {
				margin-right: 0;
			}
		}

		+a.btn,
		+button,
		+.btn-container {
			margin-left: var(--padding-s);
		}

		&:not(.mini) svg {
			margin-left: var(--negative-padding-s);
			margin-right: var(--padding-s);
		}

		&:not(.mini) svg.last {
			margin-left: var(--padding-s);
			margin-right: var(--negative-padding-s);
		}

		&.small {
			font-size: .825rem;
			font-weight: normal;
			padding: .25rem;

			&.icon {
				padding-left: .25rem;
				padding-right: .625rem;
			}
			svg {
				margin-left: 0;
			}
		}

		&.icon {
			padding-left: var(--padding-m);

			svg {
				margin: 0 var(--padding-s);
			}
		}

		&.icon.only {
			display: inline-flex;
			padding: .625rem;

			svg {
				flex: 0 0 1rem;
				margin: 0;
			}

			&.close {
				border: 0 none;
				padding: .625rem;
			}
		}

		&.negative {
			border-color: var(--func-negative-color);

			&.btn-primary {
				background: var(--func-negative-color);
				color: var(--static-invert-color);

				svg {
					fill: var(--static-invert-color);
				}

				&:not(:disabled):hover,
				&:not(:disabled):focus,
				&:not(:disabled):active {
					svg {
						fill: var(--static-invert-color);
					}
				}
			}
		}

		&.btn-primary {
			background: var(--form-main-button-background-color);
			color: var(--form-button-main-text-color);

			svg {
				fill: var(--form-button-main-text-color);
			}
		}

		&.loader {
			position: relative;

			.loading_box {
				position: absolute;

				svg {
					fill: var(--svg-invert-fill-color) !important;
					height: 75%;
					margin: 0;
					width: auto;
				}
			}
		}

		&.mini {
			height: 1.25rem;
			width: 1.25rem;

			svg {
				height: .75rem;
				margin: .25rem;
				width: .75rem;
			}
		}

		&.unstyled {
			background: none;
			border: 0 none;
			font-size: inherit;
			cursor: pointer;
			padding: 0;

			&:not(:disabled):hover,
			&:not(:disabled):focus,
			&:not(:disabled):active {
				background: var(--screen-trans-background-color);
				box-shadow: none;
				color: var(--form-icon-button-hover-color);
				transform: none;

				svg {
					fill: var(--form-icon-button-hover-color);
					filter: drop-shadow(0 1px 0 var(--form-button-icon-hover-shadow));
				}
			}

			&.btn-primary:not(:disabled):hover,
			&.btn-primary:not(:disabled):focus,
			&.btn-primary:not(:disabled):active {
				svg {
					fill: var(--static-invert-color);
				}
			}

			&.negative {
				svg {
					fill: var(--func-negative-color);
				}
			}
		}

		&.dropdown-toggle {
			margin-bottom: 0;
			padding-right: var(--padding-s);

			&[aria-expanded="true"] .menu_arrow {
				transform: rotate(180deg);
			}

			>span::after {
				content: "…";
				padding-right: var(--padding-s);
			}
		}
	}

	a.btn:link,
	a.btn:visited {
		color: var(--form-button-text-color);
		display: inline-block;
		text-decoration: none;
	}

	a.btn:disabled,
	a.btn.disabled,
	button:disabled,
	button.disabled {
		background-color: var(--form-button-disabled-background-color);
		border-color: var(--form-button-disabled-background-color);
		box-shadow: none !important;
		color: var(--form-button-disabled-text-color);
		cursor: default;

		svg {
			fill: var(--form-button-disabled-text-color);
		}
	}

	a.btn.btn-primary:link,
	a.btn.btn-primary:visited {
		color: var(--form-button-main-text-color);
	}

	a.btn.btn-primary:disabled,
	a.btn.btn-primary.disabled,
	button.btn-primary:disabled,
	button.btn-primary.disabled {
		background-color: var(--form-button-disabled-text-color);
		color: var(--static-invert-color);
		svg {
			fill: var(--static-invert-color);
		}
	}

	a.btn.btn-primary:not(:disabled):hover,
	a.btn.btn-primary:not(:disabled):focus,
	a.btn.btn-primary:not(:disabled):active,
	button.btn-primary:not(:disabled):hover,
	button.btn-primary:not(:disabled):focus,
	button.btn-primary:not(:disabled):active {
		color: var(--form-button-main-text-color);
		svg {
			fill: var(--form-button-main-text-color);
		}
	}

	a.btn:not(:disabled):hover,
	a.btn:not(:disabled):focus,
	a.btn:not(:disabled):active,
	button:not(:disabled):hover,
	button:not(:disabled):focus,
	button:not(:disabled):active {
		box-shadow: 0 2px 4px var(--box-shadow-color);
		color: var(--form-button-text-color);
		transform: translateY(-1px);
		outline: none;
		svg {
			fill: var(--form-button-text-color);
		}
	}

	a.btn.disabled:hover,
	a.btn.disabled:focus,
	a.btn.disabled:active {
		transform: none;
	}

	.btn.up,
	.btn.down {
		background-color: transparent;
		border-color: transparent;

		svg {
			fill: var(--table-order-button-color);
		}

		&:hover,
		&:focus,
		&:active {
			background-color: var(--form-button-background-color);
			border-color: var(--form-icon-button-hover-color);

			svg {
				fill: var(--form-button-icon-color);
			}
		}
	}

	.input_range_wrapper {
		align-items: center;
		display: flex;
		flex-direction: column;
		height: 2.5rem;

		input[type="range"] {
			flex: 1;
		}
	}

	input[type="range"] {
		-webkit-appearance: none;
		background: transparent;
		@include range-track(
			/* background: */
			var(--form-input-background-color),
			/* border: */
			1px solid var(--form-focus-line2-color),
			/* box-shadow: */
			inset 0 0 2px var(--form-focus-line2-color),
			/* height: */
			var(--padding-s)
		);
		@include range-thumb(
			/* background: */
			 var(--form-main-button-background-color),
			/* border: */
			1px solid  var(--form-main-button-background-color),
			/* border-radius: */
			0,
			/* box-shadow: */
			0 0 2px var(--form-focus-line2-color),
			/* cursor: */
			pointer,
			/* dimension (height): */
			var(--padding-m),
			/* dimensionLarge (height): */
			var(--padding-l),
			/* margin-top: */
			-6px
		);
	}

	input[type="range"]:not([disabled]) {
		cursor: pointer;
	}

	input[type="range"][disabled] {
		filter: grayscale(1);

		&::-moz-range-thumb {
			cursor: default;
		}

		&::-webkit-slider-thumb {
			cursor: default;
		}

		&::-ms-thumb {
			cursor: default;
		}
	}

	input[type="range"]:focus {
		outline: none;
	}

	input[type='range']::-moz-focus-outer {
		border: 0;
	}

	input[type="range"]:not([disabled]):hover::-moz-range-thumb {
		box-shadow: 0 2px 4px var(--box-shadow-color);
	}

	input[type="range"]:not([disabled]):hover::-webkit-slider-thumb {
		box-shadow: 0 2px 4px var(--box-shadow-color);
	}

	input[type="range"]:not([disabled]):hover::-ms-thumb {
		box-shadow: 0 2px 4px var(--box-shadow-color);
	}

	.input_range_ticks {
		display: flex;
		width: calc(100% - 10px);

		>span {
			display: inline-block;
			height: var(--padding-s);
			border-left: 1px solid var(--form-button-disabled-text-color);
			width: 10%;

			&:last-child {
				border-right: 1px solid var(--form-button-disabled-text-color);
			}
		}
	}

	.input_range_hint {
		display: flex;
		justify-content: space-between;
		text-align: center;
		width: 100%;

		>span {
			font-size: .75rem;
			width: 33.3333%;

			&:first-child {
				text-align: left;
			}

			&:last-child {
				text-align: right;
			}
		}
	}

	.billing_slider {
		position: relative;

		a {
			border: 1px solid var(--border-trans-color);
			color: var(--link-color);
			display: flex;
			font-size: .75rem;
			font-weight: normal;
			height: var(--padding-xl) + 2px;
			margin-bottom: var(--padding-xl);
			text-decoration: none;
			width: 100%;

			span.billing {
				display: block;
				height: var(--padding-xl);

				&.done {
					background: var(--screen-shaded-background-color);

					.value {
						color: var(--text-greyed-color);
						left: 2px;
					}
				}

				&.todo {
					background: var(--form-main-button-background-color);

					.value {
						color: var(--title-color);
						font-size: .875rem;
						font-weight: bold;
						left: calc(50% - .75rem);
					}
				}

				&.remain {
					background: var(--form-input-background-color);

					.value {
						color: var(--text-greyed-color);
						right: 2px;
					}
				}

				.value {
					line-height: 1.25rem;
					top: var(--padding-2xl);
					position: absolute;
				}
			}

			&:hover,
			&:focus,
			&:active {
				box-shadow: 0 2px 4px var(--box-shadow-color);
			}
		}
	}

	.btn-group {
		.dropdown-menu {
			background: var(--form-button-background-color);
			box-shadow: 0 2px 4px var(--box-shadow-color);
			display: none;
			flex-direction: column;
			list-style-type: none;
			max-width: 100vw;
			padding: 0;
			position: absolute;
			z-index: $floatingLayer;

			li {
				padding: 0;

				&:nth-child(n + 1) {
					border-top: 1px solid var(--border-trans-color);
				}
			}

			a.btn,
			button {
				background: var(--form-button-background-color);
				border: 0 none;
				color: var(--form-button-text-color);
				display: block;
				font-weight: bold;
				margin: 0;
				text-align: left;
				padding: var(--padding-m);
				text-decoration: none;
				white-space: nowrap;

				&:hover,
				&:focus,
				&:active {
					box-shadow: none;
					color: var(--form-icon-button-hover-color);
					transform: none;

					svg {
						fill: var(--form-icon-button-hover-color);
					}
				}

				&.negative {
					background: var(--form-button-background-color);
					color: var(--func-negative-color);

					svg {
						fill: var(--func-negative-color);
					}

					&:hover,
					&:focus,
					&:active {
						color: var(--form-icon-button-hover-color);

						svg {
							fill: var(--form-icon-button-hover-color);
						}
					}
				}

				&.icon svg,
				&:not(.mini) svg {
					margin: 0 var(--padding-s) 0 0;
				}
			}

			.btn-container {
				width: 100%;
			}

			button:not(:disabled):hover,
			button:not(:disabled):focus,
			button:not(:disabled):active {
				box-shadow: none;
				color: var(--form-icon-button-hover-color);
				transform: none;

				svg {
					fill: var(--form-icon-button-hover-color);
				}
			}

			button {
				width: 100%;

				&.icon svg {
					margin-left: 0;
				}
			}
		}

		&.open {
			position: relative;

			.dropdown-menu {
				display: flex;
				top: calc( 1.625rem  + 11px );
			}

			.dropdown-menu-right {
				left: auto;
				right: 0;
			}
		}

		ul {
			list-style-type: none;
			padding: 0;
			text-align: right;

			li {
				display: block;
				padding: 0;
			}

			.btn {
				margin: 2px 0;
				text-align: left;
				width: 100%;
			}
		}
	}

	.input-group {
		align-items: center;
		display: flex;

		.input-group-addon {
			display: inline-block;
			padding: 0 var(--padding-s);

			&:first-child {
				border-right: 1px dotted var(--border-trans-color);
			}

			&:last-child {
				border-left: 1px dotted var(--border-trans-color);
			}
		}
	}

	.data {
		background: var(--form-data-background-color);
		border-bottom: 1px solid var(var(--border-trans-color));
		font-size: .875rem;
		display: block;
		min-height: 2.5rem;
		line-height: 1.25rem;
		padding: var(--padding-m) 0;

		&.flex {
			justify-content: space-between;
		}
	}

	.checkbox {
		font-weight: bold;

		input {
			margin-right: var(--padding-s);
		}
	}

	.search_form {
		input:only-of-type {
			flex: 1 0 auto;
			margin-right: var(--padding-s);
		}

		button {
			flex: 0 0 auto;
		}
	}

	.search_filters {
		border-bottom: 1px dashed var(--border-color);
		margin-bottom: var(--padding-m);
		padding-bottom: var(--padding-m);

		fieldset {
			>div {
				padding-bottom: var(--padding-m);

				&.flex {
					div {
						padding-bottom: 0;
					}

					button {
						margin: var(--padding-s) 0;
					}
				}
			}
		}

		h2 {
			border-bottom: 0 none;
			padding-bottom: var(--padding-s);
		}

		.form-search,
		form fieldset {
			display: flex;
			flex-wrap: wrap;
		}

		.form-group {
			display: flex;

			label {
				font-weight: bold;
				white-space: nowrap;
			}

			div.wrapped {
				padding-top: 1.5rem;

				.help-block {
					padding-top: 0;
				}
			}

			&:not(.range) {
				flex-direction: column;
				padding-right: var(--padding-l);
			}

			&.range {
				>label:not([for]) {
					display: none;
				}

				.form-group {
					padding-right: 0;
				}

				&.number,
				&.date {
					width: calc(18em + 20px);

					input[type="text"],
					input[type="date"] {
						width: 9em;
					}
				}
			}

			.checkbox {
				min-height: 2.5rem;
			}
		}

		button {
			margin-top: 25px;
		}
	}

	.year_filter {
		.form-group {
			max-width: 10em;
		}

		div.form-group:not([id]) {
			display: none;
		}
	}

	.main_content .local-navigation:first-child+.search_filters {
		padding-top: var(--padding-l);
	}

	.icon_choice {
		div.flex {
			align-items: center;
			padding: var(--padding-s) 0;
		}

		h6 {
			font-weight: bold;
			padding: var(--padding-s) var(--padding-m) var(--padding-s) 0;
			width: auto;
		}

		label {
			padding: 0;
			width: auto;

			>span {
				background: var(--form-button-background-color);
				border: 1px solid  var(--form-main-button-background-color);
				color: var(--form-button-text-color);
				display: inline-block;
				font-size: .875rem;
				line-height: 1.25rem;
				padding: var(--padding-s) var(--padding-m);
				white-space: nowrap;

				svg {
					fill: var(--form-button-icon-color);
					pointer-events: none;
					vertical-align: -.2em;
				}
			}

			input:checked+span {
				background: var(--theme-color);
				border-color: var(--theme-color);
				color: var(--theme-text-color);
				z-index: 2;

				svg {
					fill: var(--theme-text-color);
				}
			}

			input:not(:checked)+span {
				cursor: pointer;
				z-index: 1;

				&:hover,
				&:focus,
				&:active {
					box-shadow: 0 2px 4px var(--box-shadow-color);
					outline: none;
					transform: translateY(-1px);
					z-index: 5;
				}
			}
		}
	}

	.limited_width .icon_choice {
		label {
			width: auto;
		}
	}

	.checkbox {
		align-items: center;
		display: flex;
	}

	.radio {
		display: inline-block;
		padding-right: var(--padding-m);
	}

	div.checkbox,
	div.radio,
	div.toggle {
		font-size: .875rem;
		min-height: 1.5rem;
		padding: .5rem 0;
		position: relative;
		width: 100%;

		~.help-block {
			padding: 0 0 var(--padding-m) 0;

			+.help-block {
				margin-top: var(--negative-padding-s);
			}
		}
	}

	div.checkbox label,
	div.radio label,
	div.toggle label {
		align-items: flex-start;
		display: flex;
		font-weight: bold;
		margin: -.5rem 0;
		padding: .5rem 0;
		position: relative;

		&:not([for]) {
			line-height: 1.75;
		}
	}

	div.checkbox input[type="checkbox"],
	div.toggle input[type="checkbox"],
	div.radio input[type="radio"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		flex: 0 0 1.5rem;
		height: 1.5rem;
		margin-right: .75rem;
		opacity: 0;
		width: 1.5rem;

		&:not(:disabled) {
			cursor: pointer;

			+span {
				cursor: pointer;
				line-height: 1.25;
			}
		}

		+span {
			padding-top: .125rem;

			&::before {
				background: var(--screen-trans-background-color);
				border: .0625rem solid var(--form-checkradio-line-color);
				content: "";
				display: inline-block;
				left: 0;
				pointer-events: none;
				position: absolute;
				top: .5rem;
			}

			&::after {
				pointer-events: none;
			}
		}

		&:disabled+span {
			color: var(--form-input-disabled-text-color);

			&::before {
				border-color: var(--form-checkradio-disabled-line-color);
			}
		}

		&:checked+span::after {
			content: "";
			display: inline-block;
			left: 0;
			position: absolute;
			top: .5rem;
		}

		&:focus+span::before {
			border-color: var(--form-checkradio-line-focus-color);
			outline: 1px dotted var(--form-focus-outline-color);
			outline-offset: 2px;
		}
	}

	div.radio input[type="radio"] {
		+span::before {
			border-radius: 50%;
			height: 1.625rem;
			width: 1.625rem;
		}

		&:checked+span::after {
			background: var(--form-checkradio-line-focus-color);
			border-radius: 50%;
			border: .25rem solid var(--screen-trans-background-color);
			left: .125rem;
			height: 1.375rem;
			top: .625rem;
			width: 1.375rem;
		}

		&:disabled:checked+span::after {
			background: var(--form-checkradio-disabled-line-color);
		}
	}

	div.radio .radio-inline {
		display: inline-block;
		padding-bottom: var(--padding-s);
		padding-right: var(--padding-2xl);

		input[type="radio"] {
			margin-right: .5rem;
		}
	}

	div.checkbox .checkbox-inline {
		display: inline-block;
		padding-bottom: var(--padding-s);
		padding-right: var(--padding-2xl);

		input[type="checkbox"] {
			margin-right: .5rem;
		}
	}

	div.checkbox input[type="checkbox"] {
		+span::before {
			height: 1.5rem;
			width: 1.5rem;
		}

		&:checked+span::after {
			border: .375rem solid var(--form-checkradio-line-focus-color);
			border-width: 0 .375rem .375rem 0;
			border-radius: 1%;
			box-shadow: .0625rem .0625rem 0 var(--screen-background-color);
			height: 1.3125rem;
			left: .4375rem;
			margin-top: -.0625rem;
			transform: rotate(45deg);
			width: .9375rem;
		}

		&:disabled:checked+span::after {
			border-color: var(--form-checkradio-disabled-line-color);
		}
	}

	div.toggle input[type="checkbox"] {
		flex-basis: 2.75rem;
		width: 2.75rem;

		+span::before {
			border-radius: .75rem;
			height: 1.5rem;
			transition: all .25s ease-out;
			width: 2.75rem;
		}

		+span::after {
			content: "";
			background: var(--form-checkradio-line-focus-color);
			border: 0 none;
			border-radius: 50%;
			display: inline-block;
			height: 1.125rem;
			left: .1875rem;
			position: absolute;
			transition: all .25s ease-out;
			top: .6875rem;
			width: 1.125rem;
		}

		&:checked+span::before {
			background: var(--func-positive-color);
			border-color: var(--func-positive-color);
		}

		&:disabled:checked+span::before {
			border-color: var(--form-checkradio-disabled-line-color);
		}

		&:checked+span::after {
			background: var(--static-invert-color);
			border-color: var(--func-positive-color);
			left: 1.375rem;
			top: .6875rem;
		}

		&:disabled+span::after {
			background: var(--form-checkradio-disabled-line-color);
		}

		&:disabled:checked+span::after {
			background: var(--form-checkradio-disabled-line-color);
			border-color: var(--border-trans-color);
		}
	}

	.form-row {
		padding-bottom: var(--padding-s);

		.form-group {

			input[type="text"],
			select,
			textarea {
				width: 100%;
			}

			label,
			span.label {
				display: block;
				padding-top: var(--padding-l);
			}

			.icon_choice label {
				padding-top: 0;
			}

			div.checkbox label,
			div.radio label,
			div.toggle label {
				padding-top: .5rem;
			}
		}

		&:not(.single_col) {
			align-items: flex-start;
			display: flex;
			justify-content: flex-start;
		}

		.btn-group button.dropdown-toggle {
			margin-top: var(--padding-m);
		}
	}

	.form-row div[class*="col-md"]:not(.col-md-12) {
		.form-group+.form-group {
			padding-top: var(--padding-m);
		}

		div.toggle,
		div.checkbox,
		div.radio {
			padding: 2.75rem 0 .4375em;
		}

		div.checkbox+div.checkbox,
		div.radio+div.radio {
			padding-top: 1rem;
		}
	}

	.form-row div.col-md-12 {

		div.toggle,
		div.checkbox,
		div.radio {
			padding-top: var(--padding-l);
		}
	}

	.form-group {

		.help-block,
		.form-text {
			color: var(--text-greyed-color);
			display: inline-block;
			font-size: .75rem;
			padding-top: 2px;
		}

		.help-block {
			width: 100%;
		}

		p {
			font-size: .875rem;

			&:not(.help-block),
			&:not(.form-text) {
				min-height: 2.5rem;
				padding: var(--padding-m) 0;
			}
		}

		.panel-default {
			border-bottom: 1px dashed var(--border-trans-color);
			border-top: 1px dashed var(--border-trans-color);
			margin-top: var(--padding-s);
			padding-bottom: var(--padding-s);

			.panel-heading {
				font-size: 1rem;
			}
		}

		input[type="text"],
		input[type="password"],
		input[type="number"],
		input[type="date"],
		input[type="range"],
		input[type="search"],
		select,
		textarea {
			width: 100%;
		}

		.linked_field {
			align-items: center;
			display: flex;
		}

		.computed,
		.source,
		.linked {
			background: var(--icon-neutral-color);
			border-radius: 4px;
			display: inline-block;
			padding: 4px;

			+input[type="text"],
			+input[type="password"],
			+input[type="number"],
			+input[type="date"],
			+input[type="range"],
			+input[type="search"],
			+select,
			+textarea {
				margin-left: 4px;
				width: calc(100% - 40px);
			}

			svg {
				fill: var(--static-invert-color);
				height: var(--icon-size-m);
				vertical-align: var(--negative-padding-s);
				width: var(--icon-size-m);
			}
		}

		.data .computed,
		.data .source,
		.data .linked {
			margin-right: var(--padding-s);
		}

		.computed {
			background: var(--func-caution-color);

			+input[type="text"],
			+input[type="password"],
			+input[type="number"],
			+input[type="date"],
			+input[type="range"],
			+input[type="search"],
			+select,
			+textarea {
				border-bottom-color: var(--func-caution-color);
			}
		}

		.source {
			background: var(--func-positive-color);

			+input[type="text"],
			+input[type="password"],
			+input[type="number"],
			+input[type="date"],
			+input[type="range"],
			+input[type="search"],
			+select,
			+textarea {
				border-bottom-color: var(--func-positive-color);
			}
		}

		.erasable {
			position: relative;

			input {
				padding-right: 2.5rem;
			}

			.btn.erase {
				margin: 0;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		&.has-error {
			.help-block.error-message {
				color: var(--func-negative-color);
				font-weight: bold;
			}

			.help-block.error-message svg,
			label svg.error {
				fill: var(--func-negative-color);
				display: inline-block;
				height: 1.25em;
				margin-right: 2px;
				vertical-align: text-top;
				width: 1.25em;
			}

			input[type="text"],
			input[type="password"],
			input[type="number"],
			input[type="date"],
			input[type="search"],
			select,
			textarea {
				border-color: var(--func-negative-color);
				border-style: dotted;
				border-bottom-style: solid;
				outline: 0 none;
			}
		}

		&.range {
			display: flex;

			>div.alert {
				width: 100%;
			}

			>div {
				margin-right: var(--padding-l);
			}

			&.number,
			&.date {
				width: calc(18em + 20px);

				input[type="text"],
				input[type="date"] {
					width: 9em;
				}
			}
		}

		&.date {
			label {
				width: 100%;
			}
		}

		>button {
			margin: 0 var(--padding-s) var(--padding-s) 0;
		}

		.panel-heading:not(:empty) {
			font-weight: bold;
			height: 2.5rem;
			padding-top: var(--padding-l);
			white-space: nowrap;
		}

		.panel-footer {
			padding-top: var(--padding-s);

			.deform-seq-add {
				padding: var(--padding-s) var(--padding-m);;

				&::before {
					content: "+ ";
					font-size: 1.5rem;
					line-height: 1rem;
					vertical-align: text-top;
				}
			}
		}

		.btn.deform-seq-add small {
			font-weight: bold;
		}

		.deform-seq {
			counter-reset: sequenceCount;

			.panel-default {
				border-top: 0 none;
				padding-bottom: var(--padding-m);
			}
		}

		.deform-seq-item {
			background: var(--screen-background-color);
			border: 1px dashed var(--border-trans-color);
			display: flex;
			justify-content: space-between;
			margin: 0 0 var(--padding-m);
			padding: var(--padding-m);

			&.error {
				border-color: var(--func-negative-color);

				.error.text-danger {
					color: var(--func-negative-color);
				}

				.error.text-danger svg {
					fill: var(--func-negative-color);
					display: inline-block;
					height: 1em;
					margin-right: 2px;
					vertical-align: text-top;
					width: 1em;
				}

				.select2-selection {
					border-color: var(--func-negative-color);
					border-style: dotted;
					border-bottom-style: solid;
					outline: 0 none;
				}
			}

			&.form-group {
				padding: var(--padding-s) var(--padding-m);
			}

			.col-xs-11 {
				padding-left: var(--padding-m);
				padding-top: var(--padding-s);
				width: calc(100% - 2rem);

				.select2-container {
					max-width: 100%;
					min-width: 100%;
				}
			}

			.col-xs-1 {
				white-space: nowrap;
				width: 2rem;
			}

			.col-xs-11>.select2-container .select2-selection__clear {
				display: none;
			}

			.item-default {
				padding: var(--padding-m) 0 0;
			}

			.form-group {
				padding-bottom: var(--padding-m);

				~.form-group {
					padding-top: var(--padding-l);
				}
			}

			.row {
				.form-group~.form-group {
					padding-top: 0;
				}

				&:last-child {
					padding-bottom: 0;
				}
			}

			.deform-close-button,
			.deform-order-button {
				cursor: pointer;
				display: inline-block;
				font-size: 1.25rem;
				line-height: 2.5rem;
				text-align: center;
				width: 2rem;

				&:hover,
				&:focus,
				&:active {
					color: var(--form-icon-button-hover-color);
					text-decoration: none;
				}
			}

			.deform-order-button::after {
				content: "\2195";
			}
		}

		.deform-seq-container .deform-seq-item {

			&:hover,
			&:focus {
				border-color: var(--form-group-hover-color);
				border-style: solid;
				box-shadow: 0 0 5px var(--box-shadow-color);
			}

			&.has-error-seq:hover,
			&.has-error-seq:focus {
				border-color: var(--func-negative-color);
			}
		}

		.deform-seq-item.has-error-seq {
			border-color: var(--func-negative-color);

			.has-error-grid {
				.help-block.error-message {
					color: var(--func-negative-color);
					font-weight: bold;
				}

				.help-block.error-message svg,
				label svg.error {
					fill: var(--func-negative-color);
					display: inline-block;
					height: 1.25em;
					margin-right: 2px;
					vertical-align: text-top;
					width: 1.25em;
				}

				label svg.error~span.icon {
					display: none;
				}

				input[type="text"],
				input[type="password"],
				input[type="number"],
				input[type="date"],
				input[type="search"],
				select,
				textarea {
					border-color: var(--func-negative-color);
					border-style: dotted;
					border-bottom-style: solid;
					outline: 0 none;
				}
			}
		}

		.ui-sortable .deform-seq-item {
			counter-increment: sequenceCount;
			padding: var(--padding-m) var(--padding-m) var(--padding-m) 3em;
			position: relative;

			&:not(:only-of-type)::after {
				background: var(--message-default-background-color);
				content: counter(sequenceCount);
				left: 0;
				line-height: 2em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2em;
			}

			.col-xs-11 {
				padding: 0;
			}

			.col-xs-1 {
				position: absolute;
				right: 0;
				text-align: right;
				top: 0;
			}

			&:only-of-type {
				padding-left: var(--padding-xl);
			}

			&:not(:only-of-type)> {
				.col-xs-11 {
					width: calc(100% - 4rem);
				}

				.col-xs-1 {
					width: 4rem;
				}
			}

			&.item-children {
				.panel-heading {
					padding-top: 0;
				}

				.col-xs-11 {
					width: calc(100% - 2rem);
				}
			}

			.item-child {
				padding-bottom: var(--padding-m);
			}

			.help-block {
				padding-bottom: var(--padding-m);
			}
		}

		&.item-timeslot {

			// rendez-vous tranches horaires
			.panel-body {
				display: flex;
				flex-wrap: wrap;

				.item-name {
					width: 100%;
				}

				.item-start_time {
					padding-right: var(--padding-m);
					width: 50% !important;
				}

				.item-end_time {
					width: 50% !important;
				}
			}
		}
	}

	.field-display_details .form-group {
		// modifier une étude de prix - checkHere
		display: flex;
		flex-wrap: wrap;

		.checkbox {
			order: 0;
			width: 1.75rem;
		}

		label {
			align-self: center;
			order: 1;
			width: calc(100% - 1.75rem);
		}

		.help-block,
		.form-text {
			flex: 1 0 auto;
			order: 2;
			width: 100%;
		}
	}

	.form-group:target,
	div:target>.form-group {
		animation: targetFade 3s ease-out 1 both;
		box-shadow: 0 0 4px var(--static-target-color);
	}

	.form-autocomplete {
		position: relative;

		ul {
			background: var(--screen-background-color);
			box-shadow: 0 2px 4px var(--box-shadow-color);
			left: 0;
			list-style: none;
			max-height: 40vh;
			max-width: 100%;
			min-width: 50%;
			overflow-x: hidden;
			overflow-y: auto;
			position: absolute;
			top: 0;
			z-index: $floatingLayer;

			li {
				padding-bottom: 0;
			}
		}

		a {
			border-bottom: var(--border-color);
			display: block;
			padding: var(--padding-m);
		}

		a:link,
		a:visited {
			color: var(--text-color);
		}

		a:hover,
		a:focus,
		a:active {
			color: var(--link-color);
			text-decoration: none;
		}
	}
	.file-upload {
		.file-preview {
			img {
				margin-right: var(--padding-s);
				max-width: 120px;
			}
			+ .checkbox {
				width: auto;
				span {
					display: block;
					width: 100%;
				}
			}
		}
	}

	.deformFormFieldset {
		p.section.first {
			padding-bottom: var(--padding-m);
		}

		.form-group {
			padding-bottom: var(--padding-xl);
			width: 100%;

			&[class*="item-start"],
			&[class*="item-end"] {
				width: calc(50% - 15px);
			}

			div.radio,
			div.checkbox,
			div.toggle {
				width: 100%;
			}
		}

		.col_select .form-group {
			padding-bottom: 0;

			div.checkbox,
			div.radio {
				width: 1.5rem !important;
			}

			div.toggle {
				width: 3rem;
			}
		}

		.row {
			.form-group {
				padding-bottom: 0;
			}

			.form-group.deform-seq-item {
				padding-bottom: var(--padding-m);
			}

			.help-block {
				min-height: 0;
				padding-bottom: 0;
			}
		}

		&.range {
			display: flex;
			flex-wrap: wrap;

			// pas assez sélectif voir formulaire création client.
			.form-group {

				&[class*="item-start"],
				&[class*="item-end"] {
					width: 50%;
				}

				&[class*="item-start"] {
					padding-right: 15px;
				}
			}
		}

		.panel-heading {
			font-size: 1.25rem;
			font-weight: bold;
			padding-bottom: .5rem;
		}
	}

	.deform_inline_flex .deformFormFieldset {
		display: flex;

		>.form-group {
			flex: 1 1 auto;

			&:first-child {
				flex: 1 1 calc(100% - 10.5em);
			}

			&:last-child {
				flex: 0 1 10em;
				text-align: right;
			}

			button {
				margin-top: 1.625em;
			}
		}
	}

	.limited_width {

		label,
		input[type="text"]:not(.coef):not(.price):not(.with_unit),
		input[type="password"],
		input[type="number"],
		input[type="date"],
		input[type="range"],
		input[type="search"],
		select,
		textarea,
		table,
		.help-block {
			width: 100%;
		}

		input.coef[type="text"] {
			width: 5em;
		}
	}

	.editable {
		justify-content: space-between;
		padding: var(--padding-s) var(--padding-l) var(--padding-s) 0;

		button {
			align-self: flex-start;
			margin: 0 0 0 var(--padding-m);;
		}

		>div.layout.flex:first-child {
			align-items: center;
			flex-wrap: nowrap;
		}
	}

	div[class*="_cols"] .editable:not(:only-child) {
		margin-bottom: var(--padding-xl);
		position: relative;

		&::after {
			border-bottom: 1px solid var(--border-trans-color);
			bottom: 0;
			content: "";
			left: var(--padding-m);
			display: block;
			position: absolute;
			right: var(--padding-m);
		}
	}

	div.two_cols .editable {
		&:nth-child(2n+1)::after {
			left: 0;
		}

		&:nth-child(2n)::after {
			right: 0;
		}
	}

	div.three_cols .editable {
		&:nth-child(3n+1)::after {
			left: 0;
		}

		&:nth-child(3n)::after {
			right: 0;
		}
	}

	div.four_cols .editable {
		&:nth-child(4n)::after {
			right: 0;
		}

		&:nth-child(4n+1)::after {
			left: 0;
		}
	}

	.item-attendances {
		.deform-seq-container .panel-body {
			display: flex;
			line-height: 2;
			padding-top: var(--padding-m);

			.item-username {
				width: 18em;
			}

			.control-label {
				display: none;
			}
		}
	}

	.layout.flex.product-filter {
		align-items: flex-start;
		flex-wrap: nowrap;
		padding-top: var(--padding-m);

		.icon {
			flex: 0 0 2rem;
			margin-top: 2.25rem;
			text-align: center;
		}

		.field-filter {
			flex: 1 0 auto;
			padding: 0 .5rem;
		}
	}

	.dispatch_invoice .item-lines .col-xs-11 {
		>div {
			display: flex;
			flex-wrap: wrap;
		}

		div.form-row:first-of-type {
			width: 100%;

			~div.form-row {
				width: 33.3333%;

				.col-md-2 {
					width: 100%;
				}
			}
		}

	}
}

@-webkit-keyframes targetFade {
	0% {
		box-shadow: 0 0 4px var(--static-target-color);
	}

	100% {
		box-shadow: none;
	}
}

@keyframes targetFade {
	0% {
		box-shadow: 0 0 4px var(--static-target-color);
	}

	100% {
		box-shadow: none;
	}
}

@supports(appearance: none) or (-webkit-appearance: none) {
	body.caerp {
		select:not([multiple]) {
			background: var(--form-input-background-color) var(--form-select-arrow) no-repeat 100% 52%;
			background-size: 1rem .75rem;
			appearance: none;
			-webkit-appearance: none;
			padding-right: 1.25rem;

			&:not(:disabled):hover,
			&:not(:disabled):focus {
				background-image: var(--form-select-arrow-hover);
				cursor: pointer;
			}
		}
	}
}

@media (min-width: $tabletWidth ) {
	body.caerp .one_line {
		label {
			max-width: 33%;

			&.textarea_label {
				vertical-align: baseline;
			}
		}

		input[type="text"],
		input[type="password"],
		input[type="search"],
		select,
		textarea {
			width: calc(100% - 34%);
		}
	}
}

@media (min-width: $mobileWidth ) {
	body.caerp .one_line {
		.deformFormFieldset {
			display: flex;
			flex-wrap: wrap;

			.form-group {
				width: auto;
			}

			>div {
				padding: var(--padding-s) 0;
			}

			label,
			input[type="text"] {
				margin-right: var(--padding-s);
			}

			button {
				margin-left: var(--padding-m);
			}
		}
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp {

		a.btn,
		button {
			padding: 8px var(--padding-l);
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp {

		a.btn,
		button {
			padding: 8px var(--padding-m);

			&.icon_only_tablet {
				overflow: hidden;
				padding-left: 8px;
				white-space: nowrap;
				width: 2.25rem;

				svg {
					margin: 0 1rem 0 0;
				}

				&.btn-primary {
					width: 2.5rem;
					svg {
						margin-left: .125rem;
					}
				}
			}
		}

		.separate_block.border_left_block {
			h2.collapse_title {
				~div {
					padding-left: var(--padding-l);
				}
			}
		}

		div.four_cols .editable {
			&:nth-child(2n)::after {
				right: 0;
			}
		}

		.icon_choice label {
			>span>svg+span {
				display: none;
			}
		}

		.timeslot_attendee {
			.radio-inline {
				width: 10em;
			}
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp {
		.form-row {
			flex-wrap: wrap;
			max-width: calc(100vw - 40px);
		}

		.two_cols .form-row,
		.three_cols .form-row,
		.four_cols .form-row {
			max-width: calc(100vw - 30px);
		}

		a.btn,
		button {
			padding: 8px var(--padding-s);

			&.icon_only_mobile {
				overflow: hidden;
				padding-left: 8px;
				white-space: nowrap;
				width: 2.25rem;

				svg {
					margin: 0 1rem 0 0;
					vertical-align: sub;
				}

				&.btn-primary {
					width: 2.875rem;

					svg {
						margin-left: .1875rem;
					}
				}
			}

			&.icon {
				padding-left: var(--padding-s);
			}

			&.icon.icon_only_mobile {
				padding-left: var(--padding-m);
			}
		}

		.form-group {
			&.item-timeslot {

				// rendez-vous tranches horaires
				.panel-body {
					.item-start_time {
						padding-right: 0;
						width: 100%;
					}

					.item-end_time {
						width: 100%;
					}
				}
			}
		}

		.layout.three_cols>.editable:nth-child(3n),
		.layout.three_cols>.editable:nth-child(3n + 2) {
			padding-left: 0;

			&::after {
				left: 0;
			}
		}

		.timeslot_attendee {
			.radio-inline {
				width: 12em;
			}
		}

		.dispatch_invoice .item-lines .col-xs-11 {
			div.form-row:first-of-type {
				~div.form-row {
					width: 100%;
				}
			}

		}
	}
}

@media print {

	// styles used when printing pages
	body.caerp form {
		.search_filters {
			.collapse_title[aria-expanded="false"] {
				display: none;
			}
		}
	}
}
